<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        html{
            scroll-behavior: smooth;
        }
        body{
            height: 2000px;
        }
        .box {
            width: 80px;
            height: 80px;
            background: #63a35c;
            text-align: center;
            line-height: 80px;
            color: whitesmoke;
            border-radius: 5px;

            z-index: 9999;
            position: fixed ! important;
            right: 30px;
            top: 80%;
            opacity: 0;
            transition: all .5s;

        }
        img{
            width: 80px;
            height: 80px;
        }
    </style>
</head>
<body>
<div class="box">
    <img src="images/111.jpg" alt="" >
</div>
<!--<div class="box">返回顶部</div>-->
</body>
</html>
<script !src="">
    const btn = document.querySelector('.box')
    window.addEventListener('scroll',function (){
        const n = document.documentElement.scrollTop
        console.log(n)
        if (n > 100){
            console.log('大于100')
            btn.style.opacity ='1'
        }else {
            btn.style.opacity='0'
        }

        btn.addEventListener('click',function (){
            console.log('----')
            document.documentElement.scrollTop =0
        })
    })
</script>